<template>
    <div class="box">
        <div class="header">
             <van-nav-bar title="订单详情" left-arrow @click-left="$router.back()" />
        </div>
        <div class="content">
              <van-swipe-cell v-for="item in list">
                <div class="info">
                  <p>订单号:{{item.title}}</p>
                  <p>订单状态:{{item.status==1 ? '待付款':'已付款'}}</p>
                </div>
           <div v-if="item.status==1" >
                <van-count-down :time="time" />
                </div>
        <van-card
          v-for="el in item.orderList"
          :num="el.count"
          :price="el.price"
         
          :title="el.title"
      
          :thumb="el.image"
        />

         <div class="info2">
             <van-row>
                 <van-col span="6">订单号：</van-col>
                  <van-col span="6">{{item.title}}</van-col>
             </van-row>
             <van-row>
                 <van-col span="6">支付方式：</van-col>
                  <van-col span="6">{{item.status==1 ? '待付款':'支付宝支付'}}</van-col>
             </van-row>
             <van-row>
                 <van-col span="6">订单金额：</van-col>
                  <van-col span="6">{{item.price}}</van-col>
             </van-row>
         </div>
      </van-swipe-cell>
        </div>

          <!-- 骨架屏 -->
         <van-skeleton>
  <template #template>
    <div :style="{ display: 'flex', width: '100%' }">
      <van-skeleton-image />
      <div :style="{ flex: 1, marginLeft: '16px' }">
        <van-skeleton-paragraph row-width="60%" />
        <van-skeleton-paragraph />
        <van-skeleton-paragraph />
        <van-skeleton-paragraph />
      </div>
    </div>
  </template>
</van-skeleton>
    </div>
</template>

<script setup>
import { useCounterStore } from "@/stores/counter";
import {ref,onMounted} from 'vue'
const store = useCounterStore();
  const time = ref(30 * 60 * 60 * 1000);
let list = ref([])
onMounted(()=>{
    list.value=store.myOrderList
})
</script>

<style lang="scss" scoped>
.info{
    display:flex;
    justify-content: space-between;
}
.info2{
    background: #fff;
    padding: 20px;
    font-size: 14px;
    color: #888888;
}
</style>